<template>
    <div class="bg">
         <div class="top_btn_list">
            <div class="cancel" @click="returnTap">取消</div>
            <div class="title"></div>
            <div class="publish_btn" @click="returnTap">完成</div>
        </div>
       <div class="pass_title">通过朋友验证</div>
       <div class="main">
           <div class="main_title">设置备注名</div>
           <div class="main_input"><input type="text" value="最熟悉的陌生人"></div>
           <div class="main_title margin_top_10">生活圈和动态视频</div>
           <div class="list_box">
           <div class="main_list">
               <span>不让他看动态</span>
               <van-switch v-model="switchChecked" size="30" />
           </div>
            <div class="main_list">
               <span>不看他</span>
               <van-switch v-model="switchChecked1" size="30" />
           </div>
           </div>
       </div>
        
    </div>
</template>
<script>
export default {
    data(){
        return{
            switchChecked: false,
            switchChecked1:false
        }
    },
    methods:{
         returnTap(){
         this.$router.go(-1)
        },
    }
}
</script>
<style  scoped>
.bg{
    width: 100vw;
    height: 100vh;
    /* background: #eee; */
}
.top_btn_list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 20px;
    height: 80px;
}
.title{
font-weight: 600;
}
.publish_btn{
    height: 30px;
    width: 55px;
    line-height: 30px;
    text-align: center;
    background: #0DC365;
    color: #fff;
    border-radius: 2px;
}
.pass_title{
    height: 100px;
    line-height: 100px;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
}
.main{
    margin: 0 20px;
}
.main_title{
    color: #8B8B8B;
    font-size: 14px;

}
.main_input{
    background: #F8F8F8;
    height: 60px;
    border-radius: 5px;
}
.main_input input{
    width: 90%;
    height: 100%;
    margin-left: 20px;
 border: none;
 outline: none;
   background: #F8F8F8;
   color: #C3C3C5;
}
.main_list{
     padding: 10px 20px;
   
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.list_box{
  
  border-radius: 10px;
   background: #F8F8F8;
}
.margin_top_10{
    margin-top: 10px;
}
</style>